import React from 'react';
import styles from '../style/toplist.scss';
import Page from './page.js';

export default class ListItem extends React.Component {
	constructor(props){
        super(props)
        this.state={
        	indexList : [],
            totalData:[],
            totalNum : 0,
            current : 1,
            pageSize : 10,
            goValue:'',
            totalPage : 0,
        }
    }

     //点击翻页
   	pageClick(pageNum,e){
        let that = this;
       	if(pageNum != that.state.current){
           	that.state.current = pageNum
       	}
       	that.state.indexList=[];//清空之前的数据
       	for(var i = (pageNum - 1) * that.state.pageSize; i< that.state.pageSize * pageNum; i++){
           	if(that.state.totalData[i]){
               that.state.indexList.push(that.state.totalData[i])
           	}
       	}
       	that.setState({indexList:that.state.indexList})
       //console.log(that.state.indexList)
    }
    //上一步
    goPrevClick(){
        var that = this;
        let cur = this.state.current;
        if(cur > 1){
            that.pageClick( cur - 1);
        }
    }
    //下一步
    goNext(){
        var that = this;
        let cur = that.state.current;
        if(cur < that.state.totalPage){
            that.pageClick(cur + 1);
        }
    }
	render(){
        const serviceShows = this.state.indexList.map((service,index)=>{
            return  <li className="playlist__item">
                        <div className="playlist_item_box">
                            <div className="paly_list_cover">
                                <a href="javascript:;"><img src={service.img}/></a>
                            </div>
                            <h4 className="play_title">
                                <a href="javascript:;" className="js_playlist" >{service.title}</a>
                            </h4>
                            <div className="play_author">
                                <a href="javascript:;">{service.songList}</a>
                            </div>
                            <div className="play_time">{service.amount}</div>
                        </div>
                    </li>
            
        })
        return(
            <div>
                {serviceShows}
                <Page total={this.state.totalNum}
                          current={this.state.current}
                          totalPage={this.state.totalPage}
                          goValue={this.state.goValue}
                          pageClick={this.pageClick.bind(this)}
                          goPrev={this.goPrevClick.bind(this)}
                          goNext={this.goNext.bind(this)}/>
            </div>
        )
    }
    componentWillMount(){
    	var that = this;
    	var ajaxData = {
    		type : 'get',
    		url : 'http://www.genzqi.online/qqmusic/php/playlistData.php',
    	}
    	var ajax=new XMLHttpRequest();
		ajax.open(ajaxData.type,ajaxData.url,true);
		ajax.send();
		ajax.onreadystatechange=function(){
			if(ajax.readyState==4 && ajax.status==200){
				var arr=JSON.parse(ajax.responseText);
				that.setState({
                    totalData : arr,
                    totalNum : arr.length,
                });
                let totalPage = Math.ceil(that.state.totalNum/that.state.pageSize);
                that.setState({
					totalPage : totalPage
				});
				that.pageClick(1);
			}
		}
    }
}